<DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>老婆生日快乐</title>
        <style>
            .container {
                perspective: 500px;
            }
            
            .cube {
                width: 196px;
                height: 196px;
                margin: 100px auto;
                border: 1px solid #000;
                animation: spinCube 8s infinite ease-in-out;
                transform-style: preserve-3d;
            }
            
            @keyframes spinCube {
                0% {
                    transform: rotateX( 0deg) rotateY( 0deg);
                }
                100% {
                    transform: rotateX( 360deg) rotateY( 360deg);
                }
            }
            
            .side {
                display: block;
                position: absolute;
                width: 196px;
                height: 196px;
                border: 2px solid black;
                line-height: 196px;
                font-size: 120px;
                font-weight: bold;
                color: white;
                text-align: center;
                ;
            }
            /*设置背景颜色*/
            
            .cube .front {
                background: hsla(0, 100%, 50%, 0.7)
            }
            
            .cube .right {
                background: hsla(25, 62%, 55%, 0.7)
            }
            
            .cube .top {
                background: hsla(138, 81%, 44%, 0.7)
            }
            
            .cube .back {
                background: hsla( 120, 100%, 50%, 0.7)
            }
            
            .cube .left {
                background: hsla(354, 81%, 34%, 0.7)
            }
            
            .cube .bottom {
                background: hsla( 240, 100%, 50%, 0.7)
            }
            /*位置偏移*/
            
            .cube .front {
                transform: translateZ( 100px);
            }
            
            .cube .back {
                transform: rotateX( -180deg) translateZ( 100px);
            }
            
            .cube .right {
                transform: rotateY( 90deg) translateZ( 100px);
            }
            
            .cube .left {
                transform: rotateY( -90deg) translateZ( 100px);
            }
            
            .cube .top {
                transform: rotateX( 90deg) translateZ( 100px);
            }
            
            .cube .bottom {
                transform: rotateX( -90deg) translateZ( 100px);
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="cube backface-visibility-visible">
                <div class="side front">梦</div>
                <div class="side right">生</div>
                <div class="side left">日</div>
                <div class="side top">快</div>
                <div class="side bottom">楠</div>
                <div class="side back">乐</div>
            </div>
        </div>

    </body>

    </html>